<template>
  <div class="main">
    <div class="clt">
      <div class="homeClt">
        <clt-item :qgData="qgData" v-if="cityLv > 1" :key="cityLv"></clt-item>
      </div>
    </div>
    <div class="lishui">
      <div class="home">
        <MainHeader @yyrEmit="yyrEmit" />
        <oneLeft v-if="isShowLeft" :cityLv="cityLv" :cityList="cityList" />
        <newOneRight v-if="cityLv > 1" :key="cityLv" />
        <!--        <shengRight v-if="cityLv == 2" :startT="startT" />-->
        <jsonMap class="jsonMap" />
      </div>
    </div>
  </div>
</template>
<script>
import cltItem from './clt/index'
import MainHeader from './MainHeader/index'
import oneLeft from './left/oneLeft'
import newOneRight from './right/newOneRight'
//import shengRight from './right/newOneRight/shengRight'
import jsonMap from './myMap/jsonMap'
import { qg } from './right/newOneRight/qg.js'
import { sheng } from './right/newOneRight/sheng.js'
import { shi } from './right/newOneRight/shi.js'
import { rightData } from './right/newOneRight/rightData.js'

export default {
  components: {
    newOneRight,
    /*shengRight,*/
    jsonMap,
    MainHeader,
    oneLeft,
    cltItem,
  },
  data() {
    return {
      currentName: '',
      cityLv: 1,
      yyr: '',
      startT: '',
      cityList: ['中国'],
      isShowLeft: true,

      //f: false,
      sdBegin: 700,
      moneyBegin: 8438.35,
      timeBegin: '2022-04-01 00:00:00',

      sdsqhs: null,
      ljsdhlje: null,
      qgData: {},
      timer: null,
    }
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    let _ = this
    this.sdsqhs = this.sdBegin
    this.ljsdhlje = this.moneyBegin
    this.initQgData()
    this.timer = setInterval(() => {
      let nows = new Date()
      let begin = new Date(_.timeBegin)
      let timeSpace = ((nows - begin) * 0.0003) / 1000
      let moneySpace = (((nows - begin) / 1000) * 48) / 10000
      /*收单申请商户数【四舍五入取整】*/
      _.sdsqhs = _.sdBegin + parseInt(timeSpace)
      _.ljsdhlje = _.acculateAdd(_.moneyBegin, moneySpace)
      _.initQgData()
    }, 15000)

    this.$bus.off('currentCityName')
    //this.initPage();
  },
  methods: {
    initQgData() {
      this.qgData = {
        '01': [
          { name: '累计注册商户数', value: 6999, util: '户' },
          { name: '昨日新增商户数', value: 31, util: '户' },
        ],
        '02': [
          { name: '累计注册店铺数', value: 6999, util: '户' },
          { name: '累计小超市店铺数', value: 6243, util: '户' },
          { name: '累计小宾馆店铺数', value: 752, util: '户' },
        ],
        '03': [
          { name: '融资申请商户数', value: parseInt(this.sdsqhs * 0.75), util: '户' },
          { name: '融资办理成功商户数', value: parseInt(this.sdsqhs * 0.75 * 0.9), util: '户' },
        ],
        '04': [
          { name: '平台授信笔数', value: parseInt(this.sdsqhs * 0.75 * 0.9), util: '户' },
          { name: '平台授信金额', value: parseFloat(this.sdsqhs * 0.75 * 0.9 * 45).toFixed(2), util: '万元' },
        ],
        '05': {
          topData: [{ name: '优惠费率收单回流金额', value: parseFloat(this.ljsdhlje * 0.8).toFixed(2), util: '万元' }],
          bottomData: [
            [{ name: '享受优惠费率商户数', value: parseInt(this.sdsqhs * 0.8), util: '户' }],
            [{ name: '降低收单成本', value: parseFloat(this.ljsdhlje * 0.8 * 0.0005).toFixed(2), util: '万元' }],
          ],
        },
        '08': [
          { name: '收单申请商户数', value: parseInt(this.sdsqhs), util: '户' },
          { name: '成功办理收单商户数', value: parseInt(this.sdsqhs * 0.9), util: '户' },
        ],
        '09': [
          { name: '累计收单回流金额', value: parseFloat(this.ljsdhlje).toFixed(2), util: '万元' },
          { name: '昨日收单回流金额', value: 420, util: '万元' },
        ],
        10: [
          { name: '预计新增信贷资金', value: parseFloat(this.ljsdhlje * 0.2).toFixed(2), util: '万元' },
          { name: '预计新增地方税收', value: parseFloat(this.ljsdhlje * 0.2 * 0.06).toFixed(2), util: '万元' },
        ],
      }
      Object.assign(rightData, this.qgData)
      this.cityLv = new Date().getTime()
    },
    acculateAdd(num1, num2) {
      let r1, r2, m, c
      try {
        r1 = num1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = num2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      c = Math.abs(r1 - r2)
      m = Math.pow(10, Math.max(r1, r2))
      if (c > 0) {
        let cm = Math.pow(10, c)
        if (r1 > r2) {
          num1 = Number(num1.toString().replace('.', ''))
          num2 = Number(num2.toString().replace('.', '')) * cm
        } else {
          num1 = Number(num1.toString().replace('.', '')) * cm
          num2 = Number(num2.toString().replace('.', ''))
        }
      } else {
        num1 = Number(num1.toString().replace('.', ''))
        num2 = Number(num2.toString().replace('.', ''))
      }
      return (num1 + num2) / m
    },
    yyrEmit(e) {
      this.yyr = e
    },
    initPage() {
      this.$bus.on('currentCityName', (name, lv, cityList) => {
        this.currentName = name
        this.cityLv = lv
        this.startT = lv === 2 ? `【${name}】` : ''
        this.cityList = cityList

        this.isShowLeft = false

        switch (lv) {
          case 1:
            Object.assign(rightData, qg)
            break
          case 2:
            Object.assign(rightData, sheng)
            break
          case 3:
            Object.assign(rightData, shi)
            break
        }
        queueMicrotask(() => {
          this.isShowLeft = true
        })
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  /*width: 100%;
  height: 100%;*/
  width: 7680px;
  height: 2160px;
  overflow-y: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../../assets/images/newBgc.jpg') no-repeat;
  background-size: 100% 100%;

  .clt {
    width: 1620px;
    height: 100%;
    float: left;

    .homeClt {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }

  .lishui {
    width: 6060px;
    height: 100%;
    float: left;

    .home {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .jsonMap {
      width: 1760px;
      height: 1434px;
      position: absolute;
      top: 280px;
      left: 1232px;
      z-index: 100;
    }
  }
}
</style>
